<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <title>发送邮件title>
        <link th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
        <script th:src="@{/webjars/jquery/jquery.min.js}">script >
        < script
        th:href = "@{/webjars/bootstrap/js/bootstrap.min.js}" > script >

            head >

            < body >
            < div
        class
        = "col-md-6"
        style = "margin:20px;padding:20px;border: #E0E0E0 1px solid;" >
            < marquee
        behavior = "alternate"
        onfinish = "alert(12)"
        id = "mq"
        onMouseOut = "this.start();$('#egg').text('嗯 真听话！');"
        onMouseOver = "this.stop();$('#egg').text('有本事放开我呀！');" >
            < h5
        id = "egg" > 祝大家新年快乐！h5 > < img
        id = "doge"
        src = "http://pics.sc.chinaz.com/Files/pic/faces/3709/7.gif"
        alt = "" >
            marquee >

            < form
        class
        = "form-horizontal"
        id = "mailForm" >
            < div
        class
        = "form-group" >
            < label
        class
        = "col-md-2 control-label" > 邮件发信人
        :
        label >
        < div
        class
        = "col-md-6" >
            < input
        class
        = "form-control"
        id = "from"
        name = "from"
        th:value = "${from}"
        readonly = "readonly" >
            div >
            div >
            < div
        class
        = "form-group" >
            < label
        class
        = "col-md-2 control-label" > 邮件收信人
        :
        label >
        < div
        class
        = "col-md-6" >
            < input
        class
        = "form-control"
        id = "to"
        name = "to"
        title = "多个邮箱使用,隔开" >
            div >
            div >
            < div
        class
        = "form-group" >
            < label
        class
        = "col-md-2 control-label" > 邮件主题
        :
        label >
        < div
        class
        = "col-md-6" >
            < input
        class
        = "form-control"
        id = "subject"
        name = "subject" >
            div >
            div >
            < div
        class
        = "form-group" >
            < label
        class
        = "col-md-2 control-label" > 邮件内容
        :
        label >
        < div
        class
        = "col-md-6" >
            < textarea
        class
        = "form-control"
        id = "text"
        name = "text"
        rows = "5" > textarea >
            div >
            div >
            < div
        class
        = "form-group" >
            < label
        class
        = "col-md-2 control-label" > 邮件附件
        :
        label >
        < div
        class
        = "col-md-6" >
            < input
        class
        = "form-control"
        id = "files"
        name = "files"
        type = "file"
        multiple = "multiple" >
            div >
            div >
            < div
        class
        = "form-group" >
            < label
        class
        = "col-md-2 control-label" > 邮件操作
        :
        label >
        < div
        class
        = "col-md-3" >
            < a
        class
        = "form-control btn btn-primary"
        onclick = "sendMail()" > 发送邮件a >
            div >
            < div
        class
        = "col-md-3" >
            < a
        class
        = "form-control btn btn-default"
        onclick = "clearForm()" > 清空a >
            div >
            div >
            form >

            < script
        th:inline = "javascript" >
        var appCtx = [[${#request.getContextPath()}]];

        function sendMail() {

            var formData = new FormData($('#mailForm')[0]);
            $.ajax({
                url: appCtx + '/mail/send',
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (result) {
                    alert(result.status === 'ok' ? "发送成功！" : "你被Doge嘲讽了：" + result.error);
                },
                error: function () {
                    alert("发送失败！");
                }
            });
        }

        function clearForm() {
            $('#mailForm')[0].reset();
        }

        setInterval(function () {
            var total = $('#mq').width();
            var width = $('#doge').width();
            var left = $('#doge').offset().left;
            if (left <= width / 2 + 20) {
                $('#doge').css('transform', 'rotateY(180deg)')
            }
            if (left >= total - width / 2 - 40) {
                $('#doge').css('transform', 'rotateY(-360deg)')
            }
        });
        script >
        div >
        body >
        html >
